<title>考勤任务</title>
<div class="layui-card layadmin-header">
	<div class="layui-breadcrumb" lay-filter="breadcrumb" lay-separator=">">
        <a lay-href=""><i class="layui-icon layui-icon-locate"></i>您当前的位置：</a>
		<a><cite>考勤管理</cite></a>
		<a><cite>任务创建</cite></a>
	</div>
</div>

<style>
    .permanent-content .my-timeLine-content {
        height: 170px;
        background-color: #fff;
        padding-bottom: 3px;
    }
    .permanent-content .blockTitle{
        background-color: #2669B1;
        width: 70px;
    }
    .permanent-content .layui-form-onswitch {
        border-color: #2669B1;
        background-color: #2669B1;
    }
	.permanent-content .blockTitle .title-icon {
        line-height: 30px;
        position: relative;
        right: 0px;
        top: -1px;
    }
    .permanent-content .my-carousel {
        width: 100%;
        height: 170px;
        position: relative;
    }
    .permanent-content .my-carousel .no-data-tips{
        text-align: center;
        margin-top: 20px;
    }
    .permanent-content .my-carousel .no-data {
        font-size: 24px;
        color: #DBDBDB;
    }
    .permanent-content .my-carousel .my-carousel-arrow {
        position: absolute;
        top: 0px;
        width: 30px;
        height: 100%;
        text-align: center;
        line-height: 150px;
        cursor: pointer;
    }
    .permanent-content .my-carousel .my-carousel-arrow .layui-icon {
        font-size: 26px;
        color: #3672C8;
    }
    .permanent-content .my-carousel .leftArrow {
        left: 0px;
    }
    .permanent-content .my-carousel .rightArrow {
        right: 0px;
    }
    .permanent-content .my-carousel .my-carousel-content {
        height: 100%;
        margin: 0px 30px;
        overflow: hidden;
    }
    .permanent-content .my-carousel .my-carousel-content .my-carousel-content-inner {
        height: 100%;
        white-space: nowrap;
        font-size: 0px;
        overflow-x: auto;
        overflow-y: hidden;
    }
    .permanent-content .my-carousel .my-carousel-item {
        width: 310px;
        height: 150px;
        display: inline-block;
        background-color: #F2F7FD;
        margin-left: 20px;
        font-size: 14px;
    }
    .permanent-content .my-carousel .my-carousel-item .item-top {
        width: 100%;
        height: 120px;
        position: relative;
    }
    .permanent-content .my-carousel .my-carousel-item .item-bottom {
        width: 100%;
        height: 30px;
        line-height: 30px;
        border-top: #5293F2;
    }
    .permanent-content .my-carousel .my-carousel-item .item-bottom .left-time {
        text-indent: 8px;
        float: left;
        width: 180px;
    }
    .permanent-content .my-carousel .my-carousel-item .item-bottom .right-button {
        float: left;
        width: 122px;
        text-align: right;
        line-height: 30px;
    }
    .permanent-content .my-carousel .my-carousel-item .item-top-left {
        position: relative;
        height: 100%;
        width: 80px;
        background-image: url(../../dist/style/res/permanent.png);
		background-size: 72px 72px;
		background-repeat: no-repeat;
		background-position: center center;
    }
    .permanent-content .my-carousel .my-carousel-item .c-checkReview {
        display: block;
        position: absolute;
        left: 0px;
        top: 0px;
        width: 20px;
        height: 20px;
        visibility: hidden;
    }
    .permanent-content .my-carousel .my-carousel-item .item-top-left .task-review-active {
        visibility: visible;
    }
    .permanent-content .my-carousel .my-carousel-item .item-top-right {
        position: absolute;
        left: 80px;
        top: 0px;
        height: 100%;
        width: 230px;
    }
    .permanent-content .my-carousel .my-carousel-item .item-top-right-top {
        height: 40px;
        width: 100%;
        line-height: 40px;
    }
    .permanent-content .my-carousel .my-carousel-item .checkbox-content {
        margin: -4px 5px 0 0;
        width: 60px;
        height: 100%;
        float: right;
    }
    
    .permanent-content .my-carousel .my-carousel-item .item-top-right-bottom {
        height: 90px;
        width: 100%;
        overflow: hidden;
    }
    .permanent-content .my-carousel .my-carousel-item .item-top-right-bottom .bottom-content-file {
        height: 30px;
        width: 100%;
    }
    .permanent-content .my-carousel .my-carousel-item .item-top-right-bottom .bottom-content-from, .bottom-content-statename {
        height: 30px;
        width: 100%;
        word-wrap:break-word;
    }
    .permanent-content .my-carousel .my-carousel-item .item-top-right-bottom label {
        display: block;
        float: left;
        width: 35px;
        height: 100%;
    }
    .permanent-content .my-carousel .my-carousel-item .item-top-right-bottom .bottom-content .value-content {
        display: block;
        float: left;
        width: 195px;
        height: 100%;
    }
    .permanent-content .my-carousel .my-carousel-item .item-top-right-bottom .bottom-content .form-value-content {
        overflow: hidden;
        text-overflow:ellipsis;
        white-space: nowrap;
    }
    .permanent-content .my-carousel .my-carousel-item .item-top-right-bottom .bottom-content a {
        display: block;
        float: left;
        height: 18px;
        word-wrap:break-word;
        white-space:pre-wrap;
        word-break: break-all;
        max-width: 100%;
        height: auto;
        overflow: hidden;
        color: #23559D;
    }
    .permanent-content .my-carousel .my-carousel-item .item-top-right-bottom .bottom-content-file .file-content-out {
        overflow-y: auto;
    }
    .permanent-content .my-table-btn {
		font-size: 20px;
		border-width: 1px;
		border-style: solid;
		border-radius: 4px;
    }
    .permanent-content .my-table-btn-edit {
		color: #FD9404;
		border-color: #FD9404;
	}

	.permanent-content .my-table-btn-del, .my-table-btn-check{
		color: #FF4E32;
		border-color: #FF4E32;
    }
    .permanent-content .my-table-btn-edit:hover {
		color: #0BAFFD;
		border-color: #0BAFFD;
	}

	.permanent-content .my-table-btn-del:hover, .my-table-btn-check:hover{
		color: #0BAFFD;
		border-color: #0BAFFD;
	}
    .permanent-content .my-carousel .each-task-active{
        background-color: #FDE7A3;
    }
    .permanent-content .blockTitle .layui-icon-upload-circle{
        top: 1px;
    }
    .permanent-content .layui-badge{
        height: 19px;
        line-height: 21px;
        border-radius: 9px;
        padding: 0 10px;
    }
    #flowChart-content .ystep-lg {
        left: 30% !important;
    }
    #flowChart-content .ystep-lg .ystep-progress-bar {
        width: 665px !important;
    }
    .task-model{
        display: inline-block;
        max-width: 156px;
        overflow: hidden;
    }
    .task-detail{
        color: #333333;
        text-align: center;
        padding-top: 10px;
    }
    .task-detail .layui-input-block{
        line-height: 36px;
    }
</style>
<script type="text/html" id="permanentCarouselTpl" lay-done="layui.data.permanentCarouselTplDone(d);">
	<div class="my-carousel">
        <div class="leftArrow my-carousel-arrow" data-target="left">
            <i class="layui-icon layui-icon-prev"></i>
        </div>
        <div class="rightArrow my-carousel-arrow" data-target="right">
            <i class="layui-icon layui-icon-next"></i>
        </div>
        <div class="my-carousel-content layui-form">
            <div class="my-carousel-content-inner">
                {{#
                    if(!!d && d.length && d.length > 0) {
                        layui.each(d, function(index,item) {
                            item.inRecentTime = item.inRecentTime || {};
                            item.inRecentTime.starttime = !!item.inRecentTime.starttime ? item.inRecentTime.starttime.substring(0, 10): '暂无';
                            item.inRecentTime.endtime = !!item.inRecentTime.endtime ? item.inRecentTime.endtime.substring(0, 10): '暂无';
                }}
                    <div class="my-carousel-item T-eBtn {{index === 0 ? 'each-task-active' : '' }}" style="{{ index === 0 ? 'margin-left: 0px' : ''}}" data-target="taskReview" data-state='{{item.state}}'
                     data-taskid='{{item.id}}' data-unit='{{item.deptname}}' data-start='{{item.inRecentTime.starttime}}' data-end='{{item.inRecentTime.endtime}}' data-statename="{{item.statename}}" data-checking='{{item.checking}}'>
                        <div class="item-top">
                            <div class="item-top-left"></div>
                            <div class="item-top-right">
                                <div class="item-top-right-top">
                                    <span class="task-model" {{ item.taskname.length > 7 ? 'lay-tips='+item.taskname : '' }}>
                                        {{#
                                            var getStatusColor = function() {
                                                var mapColors = {
                                                    '00': 'layui-bg-green',
                                                    '20': 'layui-bg-blue',
                                                    '25': 'layui-bg-orange',
                                                    '30': 'layui-bg-orange',
                                                    '40': 'layui-bg-cyan',
                                                    '90': 'layui-bg-black',
                                                    '99': 'layui-bg-black'
                                                };
                                                return mapColors[item.state] || '';
                                            };
                                        }}
                                        <span class="layui-badge {{getStatusColor()}}" {{item.checking === "1" ? "style=display:none" : null}} state={{item.state}}>{{item.statename}}</span>
                                        {{item.taskname.length > 7 ? item.taskname.substring(0,7)+'...' : item.taskname}}
                                    </span>
                                    <form class="layui-form checkbox-content" lay-filter="permanent-carousel-form-checkbox">
                                        <input type="checkbox" {{item.startuse && item.startuse === "1" ? "checked" : null}} name="switch" lay-skin="switch" data-taskid="{{item.id}}" lay-filter="task-check" lay-text="开启|关闭">
                                    </form>
                                </div>
                                <div class="item-top-right-bottom">
                                    <div class="bottom-content-file bottom-content">
                                        <label for="">附件:</label>
                                        <div class="file-content-out value-content">
                                            {{# if(!!item.fileNames && item.fileNames.length && item.fileNames.length > 0) { 
                                                $.each(item.fileNames, function(index, file) {
                                            }}
                                                <a class="T-downLoad" data-url="{{file.url}}" href="javascript:void(0)">{{file.filename}}</a>
                                            {{#
                                            })
                                            } else { 
                                            }}
                                                <a href="javascript:void(0)" style="color: #23559D;" data-id="{{item.id}}" class="permanent-upload">上传附件</a>
                                            {{#  } }}
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="item-bottom">
                            <div class="left-time">
                                {{(item.inRecentTime.starttime) + '至' + (item.inRecentTime.endtime)}}     
                            </div>
                            <div class="right-button">
                                <a class="layui-icon layui-icon-edit my-table-btn my-table-btn-edit" data-target="edit" data-type={{item.checking}} data-id={{item.id}} lay-tips="编辑"></a>
                                <a class="layui-icon layui-icon-delete  my-table-btn my-table-btn-del" data-target="del" data-id={{item.id}} lay-tips="删除"></a>
                                <a class="layui-icon layui-icon-form  my-table-btn my-table-btn-check" data-target="check" data-id={{item.id}} lay-tips="查看记录"></a>
                            </div>
                        </div>
                    </div>
                {{#
                        })
                    }else {
                }}
                    <div class="no-data-tips">
                        <img src="/src/style/res/about/empty.png" >
                        <p class="no-data">暂无数据</p>
                    </div>
                {{# 
                    }
                }}
            </div>
        </div>
    </div> 
    <div class="task-detail">
        <div class="layui-inline"></div>
    </div>
    <div id="flowChart-content" style="margin:0 auto;">
        <!-- 菜单及分页容器-->
        <div class="stepCont stepCont1">
            <!-- 菜单导航显示-->
            <div class='ystep-container ystep-lg ystep-blue'></div>
        </div>
        <div id="chart-container-wrapper-permanent" style="overflow-x: auto;"></div>
    </div>
</script>
<div class="permanent-content layui-fluid">
    <div class="layui-card">
        <div class="layui-card-header">
            <button type="button" class="layui-btn layui-btn-sm btn-color T-eBtn blockTitle" data-target="add">
                <i class="layui-icon title-icon">&#xe654;</i>新增
            </button>
        </div>
        <div id="myTimeLineContent" class="layui-card-body my-timeLine-content"></div>
    </div>
</div>
<script>
    layui.use(['admin', 'laytpl', 'form', 'tools', 'upload'], function(){
        var $ = layui.$,
			view = layui.view,
            admin = layui.admin,
            element = layui.element,
            laytpl = layui.laytpl,
            form = layui.form,
            tools = layui.tools,
            setter = layui.setter,
            upload = layui.upload,
            router = layui.router(),
            currentPage = 1,
            totalPage = 0,
            layer = layui.layer,
            nodeCount = 0,
			currentStep=null,//当前第几步
			steps=[''],
			stepCounts=null,
            percentage= [''],
            flagObj={},
            $li="",
            layout = ['.my-carousel-item', '.task-detail', '.ystep-container', '#chart-container-wrapper-permanent'];

        inintData({});

        if(router.search.isCreate === '1') {
            createCZTask();
        }else if(router.search.isEdit === '1' && !!router.search.id) {
            editCZTask(router.search.id, '');
        }
            
        //初始获取数据
		function inintData(args) { 
			var getTpl = permanentCarouselTpl.innerHTML,
            viewHtml = document.getElementById('myTimeLineContent'),
            $tplC = $('#myTimeLineContent');
            var page = args.currentPage || 1,
                count = 5;
			admin.req({
                url: 'myapi/DC/api/rest/web/custom/Resident?model=select&page='+page+'&count='+count,
				success: function(res){
                    var data = res.data;
                    if(data.data) {
                        currentPage = data.page;
                        totalPage = data.pageNumber;
                        data.data.length > 0 && getFormnant(data.data[0]); 
                        laytpl(getTpl).render(data.data, function(html){
                            var $tml = $(html);
                            //上传
                            $tml.find('.permanent-upload').each(function(i, el) {
                                var taskId = $(el).data('id');
                                var tempFileName = '';
                                var uploadListIns = upload.render({
                                    elem: el,
                                    accept: 'file',
                                    url: 'myapi/DC/api/rest/web/custom/uploadTaskFile?access_token='+layui.data(setter.tableName)[setter.request.tokenName],
                                    choose: function(obj) {
                                        obj.preview(function(index, file, result){
                                            tempFileName = file.name;
                                        });
                                    },
                                    data: {
                                        taskid: taskId
                                    },
                                    done: function(res, index, upload){ //上传后的回调
                                        if(res.retcode == 0) {
                                            layer.msg('上传成功', {time: 1000});
                                            inintData({});
                                        }else {
                                            layer.msg('提示: '+ res.retmsg,{time: 1000});
                                        }
                                    },
                                    error: function(index, upload){
                                        layer.msg('上传失败，请重新选择文件上传', {time: 1000});
                                    }
                                })
                            });
                            $tplC.html($tml);
                            //下载
                            $tml.find('.T-downLoad').on('click', function() {
                                var url = 'myapi/DC'+ $(this).data('url'),
                                    name = $(this).text();
                                tools.downMethodfunction(url, name);
                            });
                            form.render(null, 'permanent-carousel-form-checkbox');
                            tools.setFont(layout);
                        });
                    }
				}
			});
        }

        //画图点击按钮移动
        $('#myTimeLineContent').on('click', '.my-carousel-arrow', function() {
            var dir = $(this).data('target');
            if(dir === 'right') {
                if(totalPage === currentPage) {
                    layer.msg('当前已是最后一页', {time: 1000});
                    return false;
                }
                var newPage = currentPage + 1;
                inintData({currentPage: newPage});
            }else if(dir === 'left') {
                if(currentPage === 1) {
                    layer.msg('当前已是第一页', {time: 1000});
                    return false;
                }
                var newPage = currentPage - 1;
                inintData({currentPage: newPage});
            }
        });
        
        //移动距离
        function moveScroll(dir) {
            var outcontentWidth = $('.my-carousel-content').width(),
                contentWidth = $('.my-carousel-content-inner').width(),
                left = $('.my-carousel-content-inner').position().left,
                unitDis = dir === 'left' ? -330 : 330,
                moveDis = left + unitDis,
                leftLeftWidth = Math.abs(contentWidth - Math.abs(moveDis));

            if(dir === 'left' && leftLeftWidth <= outcontentWidth) {
                $('.my-carousel-content-inner').animate({ left : -(contentWidth - outcontentWidth)}, 1000, 'linear');
                return false;
            }
            if(dir === 'right' && moveDis >= 0) {
                $('.my-carousel-content-inner').animate({ left : 0}, 1000, 'linear');
                return false;
            }
            $('.my-carousel-content-inner').animate({ left : moveDis}, 1000, 'linear');
        }

        //页面按钮点击事件
		$('.permanent-content').on('click', '.T-eBtn, .my-table-btn', function(event) {
            event.stopPropagation();
			var target = $(this).data('target');
			switch(target) {
				case 'add':
                    layer.open({
                        id: 'attence-addhtml',
                        title:'<i class="formFill-icon"></i><span style="color:#FFF;">创建考勤任务</span>',
                        offset: '20px',
                        type: 1,
                        shadeClose: true,
                        area: ['1133px', '550px'],
                        success: function(lay) {
                            var nowtime = { starttime: moment().subtract('1', 'month').format('YYYY-MM-DD'), endtime: moment().format('YYYY-MM-DD') };
                            var data = { settype: '0', hz: 'month', timeScope: nowtime };
                            data.callBack = function() {
                                inintData({});
                            } 
                            view(this.id).render('./task/permanent/attenceUpdate',data);
                        }
                    });
                    break;
                case 'edit':
                    var checking = $(this).data('type') + '',
                        id = $(this).data('id');
                    editCZTask(id, checking);
                    break;
                case 'del':
                    var checking = $(this).data('type') + '',
                        id = $(this).data('id'),
                        url = checking !== '1' ? 'myapi/DC/api/rest/web/custom/Resident?model=del' : 'myapi/DC/api/rest/web/custom/CheckTaskDataSave?model=del',
                        args = { id: id },
                        kqArgs = { taskid: id };
                        admin.req({
							url: "myapi/DC/api/rest/web/custom/CheckTaskDataDelSubtask",
                            data: {
                                taskid:id,
                                access_token: layui.data('layuiAdmin').access_token,
                            },
							success: function(res){ 
                                var resCode=res.data.retcode;
                                var confirmTxt=""; 
                                if(resCode=='0'){
                                    confirmTxt="当前任务正在填报中，此操作将会导致填报中的任务被删除?";
                                }else{
                                    confirmTxt="确认删除当前任务吗?";
                                }
                                layer.confirm(confirmTxt , function (index) {
                                    admin.req({
                                        url: "myapi/DC/api/rest/web/custom/CheckTaskDataSave?model=del",
                                        data: checking !== '1' ? args : kqArgs ,
                                        success: function(res){
                                            if(res.retcode == '0'){
                                                inintData({});
                                                layer.close(index);
                                                layer.msg('删除成功', {time: 1000});
                                            }
                                        }
                                    });
                                });
							}
						});
                    
                    break;
                case 'taskReview': 
                    $(this).toggleClass('each-task-active');
                    $(this).siblings().removeClass('each-task-active');
                    if($(this).hasClass('each-task-active') && $(this).data('checking') === 1) {
                        $('.layui-card-header').find('button').eq(1).css('display', 'none');
                    }else {
                        $('.layui-card-header').find('button').eq(1).css('display', 'inline-block');
                    }
                    break;
                case 'review': 
                    var allTask = document.querySelectorAll('.each-task-active');
                    var taskId = [];
                    if(allTask && allTask.length > 0){
                        layui.each(allTask, function(index, item){
                            var state = item.querySelector('.layui-badge ').getAttribute('state');
                            if(state != '30'){
                                if(state == '00' || state == '20'){ 
                                    layer.confirm('确认提交审核当前任务吗？',{icon: 3, title: '<i class="formFill-icon"></i><span style="color:#FFF;">提示</span>'}, function(layindex){
                                        taskId.push(item.getAttribute('data-taskid'));
                                        admin.req({
                                            url: 'myapi/DC/api/rest/web/custom/SubmitAudit',
                                            type: 'post',
                                            data: {
                                                taskid: JSON.stringify(taskId),
                                                jsonId: layui.data('layuiAdmin').access_token
                                            },
                                            success: function(res){
                                                if(res.retcode == '0'){
                                                    inintData({});
                                                    layer.msg('提交审核成功', {time: 1000});
                                                }
                                            }
                                        })
                                    })
                                }else{
                                    layer.msg('状态为创建中和退回修改的任务才能提交审核', {time: 1000});
                                    return false;
                                }
                            }
                        })
                    }else{
                        layer.msg('请选择需要提交审核的任务', {time: 1000});
                    }
                    break;
                case 'check':
                    var thisid = $(this).data('id');
                    admin.req({
						url: 'myapi/DC/api/rest/web/custom/GainHistory',
						data: {
							id: thisid
						},
						done: function(res){
							if(res.retcode == '0'){
								if(res.data && res.data.length > 0){
									var taskrecode = layer.open({
										id: 'temporary-addhtml',
										title:'<i class="formFill-icon"></i><span style="color:#FFF;">查看记录</span>',
										offset: '110px',
										type: 1,
										shadeClose: true,
										area: ['650px', '420px'],
										resize: false,
										success: function(lay, index){
											view(this.id).render('./task/temporary/history', {history: res.data});
										},
										cancel: function(lay, index){
											layer.close(taskrecode);
										}
									})
								}else{
									layer.msg('暂无记录', {time: 1000});
								}
							}
						}
                    })
                    break;
				default:
				    break;
			}
        });

        //监听任务开启关闭
        form.on('switch(task-check)', function(data){
            var checked = data.elem.checked,
                switchEle = data.elem,
                taskid = switchEle.getAttribute('data-taskid'),
                status = null;
            if(checked){
                status = 1;
            }else{
                status = 0;
            }
            admin.req({
                url: 'myapi/DC/api/rest/web/custom/StartAndBlock',
                type: 'post',
                data: {
                    startuse: status,
                    taskid: taskid
                },
                success: function(res){
                    if(res.retcode == '0'){
                        if(status == 1){
                            layer.msg('任务已开启', {time: 1000});
                        }else{
                            layer.msg('任务已关闭', {time: 1000});
                        }
                    }
                }
            })
        })

        //常驻任务新增
        function createCZTask() {
            layer.open({
                id: 'permanent-addhtml',
                title:'<i class="formFill-icon"></i><span style="color:#FFF;">创建常驻任务</span>',
                offset: '20px',
                type: 1,
                shadeClose: true,
                area: ['1133px', '550px'],
                success: function(lay) {
                    var data = {settype: '0', hz: 'year'};
                    data.callBack = function() {
                        inintData({});
                    }
                    view(this.id).render('./task/permanent/update',data);
                },
                cancel: function() {
                    window.selectTable = [];
                    var myIframe = document.getElementById('mainFormIframeInPermanent');
                    tools.destroyIframe(myIframe);
                    return true;
                }
            });
        };

        //任务修改
        function editCZTask(id, checking) {
            var url = checking !== '1' ? 'myapi/DC/api/rest/web/custom/GetTaskMsgsById' : 'myapi/DC/api/rest/web/custom/CheckTaskDataSelect?model=updateSelect';
            var args = {
                id: id
            },
            cArgs = {
                taskid: id
            };
            admin.req({
                url: url,
                data: checking !== '1' ? args : cArgs,
                success: function(res){
                    var data = checking !== '1' ? res.data : res.data.data;
                    layer.open({
                        id: checking !== '1' ? 'permanent-updatehtml' : 'attence-updatehtml',
                        title: checking !== '1' ? '修改常驻任务' : '修改考勤任务',
                        offset: '20px',
                        type: 1,
                        shadeClose: true,
                        area: ['1133px', '659px'],
                        success: function(lay) {
                            var timeDate = data.timeDate && data.timeDate.length && data.timeDate.length > 0 ? data.timeDate : [];
                            var settype = data.timeDate.length > 0 ? data.timeDate[0].settype : '0';
                            var hz = data.timeDate.length > 0 ? data.timeDate[0].hz : 'year';
                            data.settype = settype;
                            data.hz = hz;
                            data.taskid=id;
                            data.callBack = function() {
                                inintData({});
                            }
                            var temUrl = checking !== '1' ? './task/permanent/update' : './task/permanent/attenceUpdate';
                            view(this.id).render(temUrl,data);
                        },
                        cancel: function() {
                            window.selectTable = [];
                            var myIframe = document.getElementById('mainFormIframeInPermanent');
                            myIframe && tools.destroyIframe(myIframe);
                            return true;
                        }
                    });
                }
            });
        };

		function extend(obj1,obj2){
			for(var attr in obj2){
				obj1[attr] =  obj2[attr];
			}
		}
		function SetStep(arg){
		    this.body=document.body;
		    this.opt = {
		        show:false,
		        content:'.stepCont',
		        pageCont:'.pageCont',
		        imgWidth:20,
		        stepContainerMar:20,
		        nextBtn:'.nextBtn',
		        prevBtn:'.prevBtn',
		        steps:steps,
		        //pageClass:'',//分页的类或则id
		        stepCounts:stepCounts,//总共的步骤数
		        curStep:currentStep,//当前显示第几页
		        animating:false,
		        showBtn:true,//是否生成上一步下一步操作按钮
		        clickAble:false,//是否可以通过点击进度条的节点操作进度
		        onLoad: function(){
		
		        }
		    }
		    this.init(arg)
		}
		//初始化 生成页面的进度条和按钮
		SetStep.prototype.init=function(arg){
		    var _that=this;
		    extend(this.opt,arg);
		    this.opt.stepCounts=this.opt.steps.length;
		    this.content=$(this.opt.content);
		    this.pageCont=this.content.find(this.opt.pageCont)
		    var w_con=$(this.content).width();
		    var stepContainer=this.content.find('.ystep-container');
		    this.stepContainer=stepContainer;
		    var stepsHtml=$("<ul class='ystep-container-steps'></ul>");
		    var stepDisc = "<li class='ystep-step ystep-step-undone'></li>";
		    var stepP=$("<div class='ystep-progress'>"+
		                "<p class='ystep-progress-bar'><span class='ystep-progress-highlight' style='width:0%'></span></p>"+
		            "</div>");
		    var w_li=76;
		    var marginRight=122
		    stepP.css('width',(w_li+marginRight)*(this.opt.stepCounts-1));
		    stepP.find('.ystep-progress-bar').css('width',(w_li+marginRight)*(this.opt.stepCounts-1))
		    for(var i=0;i<this.opt.stepCounts;i++){
				if (percentage && percentage.length > 0){
					var span="<span>"+percentage[i]+"</span>"+"<span>"+this.opt.steps[i]+"</span>"
					var _s=$(stepDisc).html(span)
				}else{
					if(i==0){
			            var _s=$(stepDisc).html("<span>"+this.opt.steps[i]+"</span>").addClass('')
			        }else{
			            var _s=$(stepDisc).html("<span>"+this.opt.steps[i]+"</span>")
			        }
				}
		        
		        stepsHtml.append(_s);
		    }
		    stepsHtml.find('li').css('width',76+'px').css('marginRight',marginRight)
		    stepContainer.append(stepsHtml).append(stepP);
		    
		    stepContainer.css('left',(w_con-stepP.width()-this.opt.imgWidth-10-this.opt.stepContainerMar*2)/2)
		    this.content.css('overflow','hidden')
		    this.setProgress(this.stepContainer,this.opt.curStep,this.opt.stepCounts)
		     $(window).resize(function(){
		        var w_con=$(_that.content).width();
		        //var w_li=w_con/_that.opt.stepCounts/2;
		        var w_li=76;
		        var marginRight=122;
		        stepP.css('width',(w_li+marginRight)*2*(_that.opt.stepCounts-1));
		        stepP.find('.ystep-progress-bar').css('width',(w_li+marginRight)*(_that.opt.stepCounts-1))
		        stepsHtml.find('li').css('width',w_li+'px').css('marginRight',172)
		        stepContainer.css('left',(w_con-stepP.width()-_that.opt.imgWidth-10-_that.opt.stepContainerMar*2)/2)
		     })
		}
		//设置进度条
		SetStep.prototype.setProgress=function(n,curIndex,stepsLen){
		  var _that=this;
		    //获取当前容器下所有的步骤
		    var $steps = $(n).find("li");
		    var $progress =$(n).find(".ystep-progress-highlight");
		    //判断当前步骤是否在范围内
		    if(1<=curIndex && curIndex<=$steps.length){
		      //更新进度
		      var scale = "%";
		      scale = Math.round((curIndex-1)*100/($steps.length-1))+scale;
		      $progress.animate({
		        width: scale
		      },{
		        speed: 1000,
		        done: function() {
		          //移动节点
		          $steps.each(function(j,m){
		            var _$m = $(m);
		            var _j = j+1;
		            if(_j < curIndex){
		              _$m.attr("class","ystep-step-done");
		            }else if(_j === curIndex){
		              _$m.attr("class","ystep-step-active");
		            }else if(_j > curIndex){
		              _$m.attr("class","ystep-step-undone");
		            }
		          });
		          if(_that.opt.showBtn){
		              if(curIndex==1){
		                  _that.prevBtn.attr('disabled','true')
		                  _that.nextBtn.removeAttr('disabled')
		              }else if(curIndex==stepsLen){
		                  _that.prevBtn.removeAttr('disabled')
		                  _that.nextBtn.attr('disabled','true')
		              }else if(1<curIndex<stepsLen){
		                  _that.prevBtn.removeAttr('disabled')
		                  _that.nextBtn.removeAttr('disabled')
		              }
		          };
		           _that.opt.animating=false;
		        }
		      });  
		    }else{
		        return false;
		    }
        }
        
        //请求流程数据
        function getFormnant(args){ 
            admin.req({
                url: 'myapi/DC/api/rest/web/custom/SelectInformantByTaskid',
                data: {
                    taskid: args.id
                },
                success:function(res){
                    if (res.data.retcode == 0){
                        var data = res.data.data;
                        data.msg && $('.task-detail div').html(data.msg);
                        data.listquery && data.listquery.length > 0 && handleStateMap(data.listquery);
                        view('chart-container-wrapper-permanent').render('./task/permanent/chart',{info: data.writemsg, tid: data.taskid, args: args, type:'cz'});
                    }
                }
            });
        }

        //常驻任务点击展示当前任务流程
        $('#myTimeLineContent').on('click', '.my-carousel-item', function() {
            var id = $(this).attr("data-taskid"),
                unit = $(this).data('unit'),
                starttime = $(this).data('start'),
                endtime = $(this).data('end'),
                state = $(this).data('state')+'',
                checking = $(this).data('checking')+ '',
                statename = $(this).data('statename');
            getFormnant({id: id, unit: unit, starttime: starttime, endtime: endtime, checking: checking,state: state});
        });

        //加载任务流程向导
		function handleStateMap(data){
			steps = [''];
			percentage = [''];
			stepsCounts = 0;
			if(data && data.length > 0){
				$('.stepCont1 .ystep-container').empty();
				for (var i=0;i<data.length;i++){
					if (data[i].nodestate=="2"){
						currentStep=i+2;
					}
					if(data[i].percentage){
						percentage.push(data[i].percentage);
					}else{
						percentage.push('');
					}
					steps.push(data[i].name);		
				}
				steps.push("");
				percentage.push("");
				stepCounts=steps.length;

				var step1 = new SetStep({
					content:'.stepCont1',
					showBtn:false,
				})
			}
		} 
        
    })
</script>